<template>
  <div id="">
    <headerbox :headerTitle="'我的服务'" :hasBack='true' :headerRightTxt="'发布'" @headerRightEvent="publishEvent"></headerbox>
    <ul class="formList mb10">
      <li>
        <span>服务类型</span>
        <input type="text" name="" value="陪练" v-model="skillTypeName" readonly placeholder="类型">
      </li>
      <li @click="classify">
        <span>运动类型</span>
        <input type="text" name="" v-model="classifyValue.classifyName" readonly placeholder="请选择运动类型">
      </li>
      <li @click="sportsLevClick">
        <span>运动水平</span>
        <input type="text" name="" v-model="sportsLevValue.sportsLevName" readonly placeholder="请选择运动水平">
      </li>
      <li @click="addressMap">
        <span>活动地址</span>
        <input type="text" name="" v-model="skillJson.activeAddr" readonly placeholder="请输入活动地址">
      </li>
      <li>
        <span>费用（元/小时）</span>
        <input type="text" name="" v-model="skillJson.cost" placeholder="请设置费用">
      </li>
    </ul>
    <ul class="formList mb10">
      <li @click="statusEvent">
        <span>服务状态</span>
        <input type="text" name="" value="启用" v-model="statusValue.name" readonly placeholder="请选择服务状态">
      </li>
      <li @click="cycleEvent">
        <span>循环周期</span>
        <input type="text" name="" v-model="skillJson.cycle" readonly placeholder="请选择服务周期">
      </li>
      <li @click="timeSlotEvent">
        <span>时间段</span>
        <input type="text" name="" v-model="skillJson.timeSlot" readonly placeholder="请选择周期内时间段">
      </li>
      <li>
        <span>时长（小时）</span>
        <input type="text" name="" v-model="skillJson.duration" placeholder="请设置周期内服务时长">
      </li>
      <li>
        <span>备注时间</span>
        <input type="text" name="" v-model="skillJson.remarks" placeholder="请输入您需要备注的自定义时间">
      </li>
    </ul>

    <!-- picker -->
    <mt-popup
      v-model="pickerVisible"
      position="bottom" style="width:100%;">
      <mt-picker :slots="slots" :valueKey="valueKey" @change="pickerChange"></mt-picker>
    </mt-popup>
  </div>
</template>
<script>
import {getClassifyList,skillPush} from '@/utils/ajaxRequest.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    skillTypeName:'',
    skillJson:{
      token:'',
      skillType:0,   //类型 0:陪练 1 圈友 2 教练
      proType:'',     //类别主键
      sportsLev:'',   //运动等级 0:初级 1：中级 2 ：高级
      activeAddr:'',
      cost:'',
      status:'',
      cycle:'',       //循环周期：每天、工作日、周末
      timeSlot:'',    //时间段：上午、下午、晚上
      duration:'',    //时长
      remarks:'',     //备注
      province:'',
      city:'',
      area:'',
      lng:'',
      lat:'',
    },
    slots:[{
      flex: 1,
      values: [{id:'',name:''}],
      className: 'slot1',
      textAlign: 'center'
    }],
    valueKey:'',
    pickerVisible:false,
    pickerType:'',      //picker开启的类别

    classifyJson:[],
    classifyValue:{id:'',classifyName:''},    //活动类型--总

    sportsLevValue:{id:'',sportsLevName:''},    //运动水平

    statusValue:{id:'0',name:'开启'},       //服务状态


  }),
  components: {
  },
  computed: {
    ...mapState({
      skillType:state=>state.myServiceStore.skillType,
      mapValue:state=>state.mapStore.mapVal,
      serviceData:state=>state.mapStore.serviceData,
      classifyData:state=>state.mapStore.classifyData,
      sportsLevData:state=>state.mapStore.sportsLevData,
      statusData:state=>state.mapStore.statusData,
    })
  },
  methods: {
    ...mapMutations(['setServiceData','setClassifyData','setSportsLevData','setStatusData']),

    // 服务状态
    statusEvent() {
      this.slots[0].values = [{id:'0',name:'开启'},{id:'1',name:'禁用'}];
      this.pickerVisible = true;
      this.valueKey = 'name';
      this.pickerType = '服务状态'
    },
    // 选择活动类型
    classify() {
      this.slots[0].values = this.classifyJson;
      this.pickerVisible = true;
      this.valueKey = 'classifyName';
      this.pickerType = '活动类型'
    },
    // 运动水平
    sportsLevClick() {
      this.slots[0].values = [{id:'0',sportsLevName:'初级'},{id:'1',sportsLevName:'中级'},{id:'1',sportsLevName:'高级'}];
      this.pickerVisible = true;
      this.valueKey = 'sportsLevName';
      this.pickerType = '运动水平'
    },
    // 循环周期
    cycleEvent() {
      this.slots[0].values = ['每天','工作日','周末'];
      this.pickerVisible = true;
      this.valueKey = '';
      this.pickerType = '循环周期'
    },
    // 时间段
    timeSlotEvent() {
      this.slots[0].values = ['上午','下午','晚上'];
      this.pickerVisible = true;
      this.valueKey = '';
      this.pickerType = '时间段'
    },
    // picker 事件
    pickerChange(picker,values) {
      console.log(values);
      let pickertype = this.pickerType;
      switch (pickertype) {
        case '服务状态':
          this.statusValue = values[0];
          this.skillJson.status = values[0].id;
          break;
        case '活动类型':
          this.classifyValue = values[0];
          this.skillJson.proType = values[0].id;
          break;
        case '运动水平':
          this.sportsLevValue = values[0];
          this.skillJson.sportsLev = values[0].id;
          break;
        case '循环周期':
          this.skillJson.cycle = values[0];
          break;
        case '时间段':
          this.skillJson.timeSlot = values[0];
          break;
        default:
      }
    },
    onClassifyChange(picker,values) {
      console.log(values);
      this.classifyValue = values[0];
      this.skillJson.proType = values[0].id;
    },
    sportsLevChange(picker,values) {
      console.log(values);
      this.sportsLevValue = values[0];
      this.skillJson.sportsLev = values[0].id;
    },
    // 跳转地图查询地址信息
    addressMap() {
      this.setServiceData(this.skillJson);    //储存编辑过的数据表
      this.setClassifyData(this.classifyValue);    //储存编辑过的数据表
      this.setSportsLevData(this.sportsLevValue);    //储存编辑过的数据表
      this.setStatusData(this.statusValue);    //储存编辑过的数据表
      this.$router.push({name:'baiduMap'});
    },
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 发布
    publishEvent(data) {
      let self =  this;
      let skillJson = self.skillJson;
      for (var key in skillJson) {
        console.log(key+':'+skillJson[key]);
        if(skillJson[key]=='' && skillJson[key]!=0){    //0也当做空了？
          self.toast(key+'不能为空');
          return false;
        }
      }
      skillPush(skillJson).then(res=>{
        console.log(res);
        if(res) {
          self.toast(res.data.msg);
          self.$router.go(-1);
        }
      });
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let skillType = this.$route.query.skillType;

    self.skillJson.skillType = skillType;   //服务类型
    console.log(self.skillJson.skillType);
    switch (skillType) {
      case 0:
        self.skillTypeName = '陪练'
        break;
      case 1:
        self.skillTypeName = '圈友'
        break;
      case 2:
        self.skillTypeName = '教练'
        break;
      default:
        break;
    }
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    self.skillJson.token = xlyd_loginInfo.token;
    // 获取分类
    getClassifyList().then(res=>{
      console.log(res);
      if(res){
        self.classifyJson = res.data.result;
      }
    });
    this.$nextTick(()=>{
      let skillType = this.skillType;
      console.log(skillType);
      self.skillJson.skillType = skillType;   //服务类型
      switch (skillType) {
        case 0:
          self.skillTypeName = '陪练'
          break;
        case 1:
          self.skillTypeName = '圈友'
          break;
        case 2:
          self.skillTypeName = '教练'
          break;
        default:
          break;
      }


      let addrMessage = this.mapValue;
      if(this.serviceData){
        this.skillJson = this.serviceData;    //表单数据
      }
      if(this.classifyData){
        this.classifyValue = this.classifyData
      }
      if(this.sportsLevData){
        this.sportsLevValue = this.sportsLevData
      }
      if(this.statusData){
        this.statusValue = this.statusData
      }
      if(addrMessage=='') {

      }else{
        this.skillJson.activeAddr = addrMessage.surroundingPois[0].address+' '+addrMessage.surroundingPois[0].title;    //活动地址
        this.skillJson.province = addrMessage.addressComponents.province;   //省份
        this.skillJson.city = addrMessage.addressComponents.city;       //城市
        this.skillJson.area = addrMessage.addressComponents.district;       //区域
        this.skillJson.lng = addrMessage.point.lng;   //
        this.skillJson.lat = addrMessage.point.lat;   //
      }
    })
  }
}
</script>
<style lang="scss" scoped>
</style>
